package com.lou.springboot.controller;

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Bar;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

/**
 * 柱状图------图表测试 Controller
 *
 * @author anren
 */
@Controller
@RequestMapping("/echart")
public class EchartsController {
    /**
     * 柱状图 图表option 的封装  测试用例--路段人流数据
     *
     * @return
     */
    @RequestMapping(value = "/bar", method = RequestMethod.POST)
    @ResponseBody()
    public String bar() {
        //由于是测试用例首先声明  1.标题   2.x轴代表的路段  3.路段数据
        //标题
        String title = "路段人流数据统计";
        //路段
        String[] roads = {"长江路", "长河路", "长安路", "西湖路", "建安路"};
        //路段数据
        int[] datas = {123, 153, 643, 234, 453};
        //####开始构建option对象 ######
        //这里先做最简单的测试用用例 其他渲染的属性 大家可以在了解之后自行测试使用
        //1.创建option对象    有两种方式 一种是直接创建option但是在封装好option之后要使用json转换工具进行格式的转换
        //这里使用第二种方式直接构建GsonOption 通过toString方法可转换成json
        GsonOption option = new GsonOption();
        //2.设置标题 可选
        //将标题传入即可 并且支持链式调用 设置显示位置 居左
        option.title().text(title).x("left");
        //3.设置图例  可选
        option.legend("路段数据");
        //4.设置工具栏  可选
        //设置可标记
        option.toolbox().show(true).feature(Tool.mark, Tool.magicType);
        //5.设置显示工具
        //设置显示的格式 当鼠标放到柱状图上时的显示格式
        option.tooltip().show(true).formatter("{a}</br>{b}:{c}");
        //6.设置x轴数据
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.data(roads);
        option.xAxis(categoryAxis);
        //7.设置y轴 这里不给指定数据  自动调整
        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);
        //8.填充柱状图数据
        Bar bar = new Bar();
        bar.name("路段数据");
        for (int i = 0; i < roads.length; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("value", datas[i]);
            map.put("name", roads[i]);
            //指定路段装入指定数据
            bar.data(map);
        }
        //装入数据表中
        option.series(bar);
        //option进行json格式处理
        String result = option.toString();
        return result;
    }
}
